﻿@page "/components/datepicker"

<DocsPage>
    <DocsPageHeader Title="Date Picker">
        <Description>Provides the user with a simple way to select a date.</Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Usage">
                <Description>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">Note: Always use the two-way binding <CodeInline>@@bind-Date</CodeInline> to bind to a field of type <CodeInline>DateTime?</CodeInline></MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Code="DatePickerBasicUsageExample" ShowCode="false">
                <DatePickerBasicUsageExample />
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Read Only">
                <Description>If <CodeInline>ReadOnly</CodeInline> is set to true, the DatePicker can be used but the value will remain unchanged regardless of the actions performed or the values entered.</Description>
            </SectionHeader>
            <SectionContent Code="DatePickerReadOnlyExample" ShowCode="false">
                <DatePickerReadOnlyExample />
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Action Buttons">
                <Description>You can add buttons by using the <CodeInline>PickerActions</CodeInline> render fragment. If <CodeInline>AutoClose</CodeInline> is set to true and PickerActions are defined, selecting a day will close the MudDatePicker.</Description>
            </SectionHeader>
            <SectionContent Code="DatePickerActionButtonsExample" ShowCode="false">
                <DatePickerActionButtonsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Internationalization">
                <Description>When you set the <CodeInline>Culture</CodeInline> parameter, the DatePicker will use culture-specific month names, weekday names and even different calendars.</Description>
            </SectionHeader>
            <SectionContent Code="DatePickerInternationalizationExample" ShowCode="false">
                <DatePickerInternationalizationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dialog Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="DatePickerDialogExample">
                <DatePickerDialogExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Static Mode">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="DatePickerStaticExample">
                <DatePickerStaticExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Different views">
                <Description>By default, it opens to Date, but can be set to Year or Month.</Description>
            </SectionHeader>
            <SectionContent Code="DatePickerViewsExample">
                <DatePickerViewsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Colors">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Class="demo-datetime-margin" Code="DatePickerColorExample">
                <DatePickerColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Elevation">
                <Description>You can change the elevation with the <CodeInline>Elevation</CodeInline> parameter. The default value is 0 for static and 8 for inline.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="DatePickerElevationExample">
                <DatePickerElevationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Fixed Values Usage">
                <Description>
                    You can set fix values for day, month or year via <CodeInline>FixDay</CodeInline>, <CodeInline>FixMonth</CodeInline> and <CodeInline>FixYear</CodeInline>, default value is null for all of them.
                    This in combination with the <CodeInline>OpenTo</CodeInline> parameter allows for Year-Month Pickers, where the user only selects those two values or Month-Day Pickers where the year is already given.
                    This changes the behaviour of the picker so only views that can be set are displayed.
                </Description>
            </SectionHeader>
            <SectionContent Code="DatePickerFixedValuesExample" ShowCode="false">
                <DatePickerFixedValuesExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Range Picker Usage">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="DateRangePickerUsageExample" ShowCode="false">
                <DateRangePickerUsageExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>